<template>
	<div class="j-header2">
		<div class="top">
			<div class="container clearfix">
				<div class="pull-left logos">
					<a href="/"><img src="../assets/logo2.jpg"></a>
				</div>
				<div class="pull-right top-right">
					<div class="clearfix top-right-down">
						<div class="pull-left news-phone">400-675-5599</div>
						<div class="pull-right search-c">
							<form class="" method="post" action="#" style="display: table;">
								<input type="input" class="form-control search-txt" value="" name="keyword" />
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="header-box">
			<div class="container">
				<navbar>
					<template slot="collapse">
						<navbar-nav>
							<li :class="{active:1 == indexNum}"><router-link to="/about/hospital" role="button">医院概况</router-link></li>
							<li :class="{active:2 == indexNum}"><router-link to="/about/hospital" role="button">就诊指南</router-link></li>
							<li :class="{active:3 == indexNum}"><router-link to="/about/hospital" role="button">科学研究</router-link></li>
							<li :class="{active:4 == indexNum}"><router-link to="/about/hospital" role="button">党建园地</router-link></li>
							<li :class="{active:5 == indexNum}"><router-link to="/about/hospital" role="button">交通指南</router-link></li>
						</navbar-nav>
				</template>
			</navbar>
			</div>
		</div>
	</div>
</template>
<script>
export default{
  props: {
    indexNum: Number
  },
  data () {
    return {
      num: 1
    }
  },
  computed: {
    flag (){
	    return this.indexNum
    }
  },
  watch: {
    flag (v){
      this.indexNum = v
      console.log(this.indexNum)
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss">
	/*@import "../styles/common.css";*/
	.j-header2{
		.container{
			padding: 0;
		}
		.top{
			padding: 10px 0;
			.pull-left{
				float: left;
			}
			.pull-right{
				float: right;
			}
			.top-right{
				.top-right-down{
					margin-top: 25px;
					.news-phone{
						height:26px;
						line-height:26px;
						font-size:20px;
						font-weight:bold;
						padding-left:5px;
						color:#bd302c;
					}
					.search-c{
						.search-txt{
							width:164px;
							height:24px;
							font-size:13px;
							border-radius:0;
							box-shadow:none;
							-webkit-box-shadow: none;
							margin-left:15px;
							background:url(../assets/icon/search-back.png) right center no-repeat;
							padding-left:5px;
							border: 1px solid #c7c7c7;
							border-right: none;
						}
					}
				}
			}
		}
		.header-box{
			background: #bd302c;
			.container{
				padding: 0;
				margin: 0 auto;
			}
		}
		.navbar {
			position: relative;
			min-height: 45px!important;
			margin-bottom: 0!important;
			border: none!important;
		}
		.navbar-default {
			background-color: #bd302c!important;
			border-color: #e7e7e7!important;
			box-shadow:none!important;
		}
		.container-fluid{
			padding: 0!important;
		}
		.navbar-default .navbar-nav > .active > a,
		.navbar-default .navbar-nav > .active > a:hover,
		.navbar-default .navbar-nav > .active > a:focus {
			color: #000!important;
			background-color: #ffffff!important;
		}
		.navbar-default .navbar-collapse, .navbar-default .navbar-form {
			border: none!important;
		}
		.nav{
			width: 100%;
		}
		.nav > li > a {
			position: relative;
			display: block;
			padding: 0!important;
			text-align: center;
			line-height: 45px;
		}
		.navbar-default{
			background-image: none!important;
		}
		.navbar-default .navbar-nav > li > a {
			color: #ffffff!important;
			font-size: 16px!important;
		}
		.navbar-default .navbar-nav > li > a:hover,
		.navbar-default .navbar-nav > li > a:focus {
			color: #000!important;
			background-color: #ffffff!important;
		}
		.navbar-default .navbar-nav>.active>a,
		.navbar-default .navbar-nav>.open>a {
			background-image: none!important;
			filter: none!important;
			background-repeat: inherit!important;
			-webkit-box-shadow: none!important;
			box-shadow: none!important;
		}
		.navbar-default .navbar-nav > .open > a,
		.navbar-default .navbar-nav > .open > a:hover,
		.navbar-default .navbar-nav > .open > a:focus {
			color: #000!important;
			background-color: #ffffff!important;
		}
		.dropdown-menu {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 1000;
			display: none;
			float: left;
			min-width: 140px!important;
			padding:0!important;
			margin: 0!important;
			font-size: 14px!important;
			background-color: #005faf!important;
			border: none!important;
		}
		.dropdown-menu > li {
			width: 100%;
			a{
				text-align: center;
				font-size: 14px;
				color: #ffffff!important;
				padding: 10px!important;
			}
		}
		.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
			color: #000000!important;
			text-decoration: none!important;
			background-color: #ffffff!important;
			background-image: none!important;
		}
		.navbar-default .navbar-nav > li.dropdown:hover ul.dropdown-menu{
			display: block!important;
		}
		.navbar-collapse{
			padding: 0!important;
			margin: 0!important;
		}
	}
	@media (min-width: 768px){
		.j-header2{
			.nav > li {
				display: table-cell;
				width: 15%;
			}
			.nav > li:first-child {
				display: table-cell;
				width: 12%;
			}
			.dropdown-menu > .nav > li:first-child {
				width: 100%!important;
			}
		}
	}
	@media (max-width: 991px){
		.j-header2{
			.navbar-default .navbar-nav > li > a {
				font-size: 14px!important;
			}
		}
	}
	@media (max-width: 767px) {
		.j-header2{
			.container > .navbar-header,.container-fluid > .navbar-header,
			.container > .navbar-collapse,.container-fluid > .navbar-collapse {
				margin-right: 0!important;
				margin-left: 0!important;
			}
			.navbar-nav{
				margin: 0!important;
			}
			.nav > li {
				a{
					padding-left: 15px!important;
					text-align: left!important;
				}
			}
			.dropdown-menu > .nav > li {
				a{
					padding-left: 30px!important;
				}
			}
		}
	}
</style>